<template>
  <div class="wb-item-common" :style="itemStyle">
    <div v-if="dataKeys && (dataKeys.pic_url || dataKeys.name) && commonAttr.comPositionType == CAROUSEL_POSITION_TYPE_MAP.top" 
      class="head-name-con top-head-name-con" :style="topDistance" @click.stop>
      <div class="head-con" v-if="dataKeys.pic_url"><img v-lazy="getVariableItem.pic_url"></div>
      <div class="name-con" v-if="dataKeys.name">
        <p class="name margin-top-50" :style="nameStyle"> {{getVariableItem.name}} </p>
      </div>
    </div>
    <h3 v-if="(commonAttr.titlePositionType == CAROUSEL_POSITION_TYPE_MAP.top) && getBlogTitle" class="common-title" @click.stop>{{getBlogTitle}}</h3>
    <img :style="imgStyle" v-if="getVariableItem.url" v-lazy="getVariableItem.url" @click="onJump" @load="onImgLoaded">
    <p v-if="voteItemData && !isVoteStr" class="vote-con" :style="votePosition" @click.stop>
      {{num}}票
    </p>
    <h3 v-if="commonAttr.titlePositionType == CAROUSEL_POSITION_TYPE_MAP.center && getBlogTitle" class="common-title" @click.stop>{{getBlogTitle}}</h3>
    <div v-if="dataKeys && (dataKeys.pic_url || dataKeys.name) && commonAttr.comPositionType == CAROUSEL_POSITION_TYPE_MAP.center" class="head-name-con" @click.stop>
      <div class="head-con" v-if="dataKeys.pic_url"><img v-lazy="getVariableItem.pic_url"></div>
      <div class="name-con head-content-con">
        <p class="name" :style="nameStyle" v-if="dataKeys.name"> {{getVariableItem.name}} </p>
        <p class="text" :style="getTextStyle" @click.stop="onJump">{{ isVoteStr ? voteStr : getBlogText }}</p>
      </div>
    </div>
    <template v-else>
      <div class="head-content-con content-con" @click.stop="onJump">
        <p class="text" :style="getTextStyle">{{ isVoteStr ? voteStr : getBlogText }}</p>
      </div>
    </template>
    <div v-if="dataKeys && (dataKeys.attitudes_count || dataKeys.comments_count)" class="info-con padding-0-12" style="display:flex;padding:10px 0;justify-content:space-between;" @click.stop>
      <p v-if="dataKeys.comments_count"  class="info-comment padding-0-12" >
        评论{{repostItemData.comments_count}}
      </p>
      <p v-if="dataKeys.attitudes_count" class="info-comment padding-0-12" >
        <img class="margin-right-12 width-26 height-26" @click.stop="onPraise($event)" v-lazy="'//static.hd.xxx.com/upload/biz/26/439747.png'" alt="">
        <span class="praise-num" style="font-weight:normal;">{{ repostItemData.attitudes_count }}</span>
      </p>
    </div>
    <div v-if="commonAttr.isBtn" :class="getItemClass" :style="bottomDistance">
      <van-button :style="btnStyles" class="item-in-btn">{{ btnText }}</van-button>
    </div>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { wbBase } from '@/components/utils/wbBase'
import { vote } from "@/components/js/vote"
import {  CONTROL_TYPES } from '@/common/const'
import { EVENT_HOVER_TYPES } from '@/common/events'
import { getPxOrVw } from '@/store/utils'
import { isHasOwnProperty } from '@/plugins/utils'

const CAROUSEL_POSITION_TYPE_MAP = {
  center: 0,
  top: 1,
}
class ImgLoaded {
  static imgLoadedCount = 0;
}
export default {
  mixins: [utils, commonUtils, vote, wbBase],
  setup () {
    return {
      CAROUSEL_POSITION_TYPE_MAP: CAROUSEL_POSITION_TYPE_MAP,
    }
  },
  props: {
    isPropagation: {
      type: Boolean,
      default: false
    },
  },
  components: {
    // WbBtn
  },
  created(){
    if(!isHasOwnProperty(this.commonAttr, 'titlePositionType')){
      this.commonAttr.titlePositionType = CAROUSEL_POSITION_TYPE_MAP.top;
    }
  },
  computed: {
    getBlogTitle(){
      return this.getVariableItem.push_title || this.getVariableItem.title;
    },
    getItemClass(){
      let itemClasses = [];
      if(this.commonAttr.bottomDistance){
        itemClasses.push('btn-con');
      }
      return itemClasses;
    },
    topDistance(){
      let unit = getPxOrVw()
      return {
        top: this.commonAttr.topDistance + unit
      }
    },
    bottomDistance(){
      let unit = getPxOrVw()
      return {
        bottom: this.commonAttr.bottomDistance + unit
      }
    },
    nameStyle(){
      let fontSize_ = this.nameFontSize
      if(this.commonAttr.repostsNameColor && this.commonAttr.repostsNameColor.length > 0){
        return{
          color: this.commonAttr.repostsNameColor,
          fontSize: fontSize_
        }
      }else{
        return {
          fontSize: fontSize_
        }
      }
    },
    btnText(){
      return this.item.btn.bgUrl.length > 0 ? ' ' : this.item.btn.title
    },
  },
  methods:{
    onImgLoaded(){
      if(this.isH5Edit){
        return
      }
      ImgLoaded.imgLoadedCount++;
      if(ImgLoaded.imgLoadedCount >= this.item.lists.length){
        this.item.commonAttr.isLoadedImg = true;
        ImgLoaded.imgLoadedCount = 0;
      }
    },
    onPraise(e) {
      e.stopPropagation();
      
      let url = "/feact/wb_praise";
      let params = {
        com_id: this.item.id,
        type: EVENT_HOVER_TYPES.praise.type,
        e,
        mid: this.repostItemData.mid,
        controlId: CONTROL_TYPES.wb_reposts
      };
      this.post(url, params);
    },
  }
};
</script>
<style lang="scss">
.wb-item-common{
  position: relative;
  display: block;
  .common-title{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .info-con{
    color: #878787;
  }
  .info-comment {
    color: #878787;
  }
  .vote-con {
    font-size: var(--size-12);
    color: #f00;
  }
  .top-head-name-con{
    top: var(--size--50);
    position: absolute;
  }
  .head-name-con{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;

    .head-con{
      margin-right: var(--size-12);
      border-radius: 50%;
      img {
        width: var(--size-80);
        height: var(--size-80);
        object-fit: contain;
        border-radius: 50%;
      }
    }
    .name{
      font-weight: 600;
      margin-right: 10px;
    }
  }
  .head-content-con{
    margin-top: var(--size-10);
    .text{
      margin-top: var(--size-10);
      font-size: inherit;
      line-height: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
  .content-con{
    .text{
      max-width: 100%;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical
    }
  }
  .btn-con{
    width: inherit;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
  }
}
</style>

